<template>
  <div class="com-container">
    <div class="com-chart" ref="fname_ref"></div>
  </div>
</template>

<script>
import chalk from "../../../public/static/theme/chalk"

export default {
  props: ['admissionyear','academy','status'],
  watch: {
    admissionyear: {
      handler(newValue,oldValue) {
        this.getData()
      }
    },
    academy: {
      handler(newValue,oldValue) {
        this.getData()
      }
    },
    status: {
      handler(newValue,oldValue) {
        this.getData()
      }
    }
  },
  data() {
    return {
      chartInstance: null,
      allData: [],
      currentPage: 1,
      totalPage: 0,
      timerId: null, //定时器的标识
    };
  },
  mounted() {
    this.initChart();
    this.getData();
    // 屏幕大小改变的监听方法，当屏幕大小发生改变时，将会调用screenAdapter()方法
    window.addEventListener("resize", this.screenAdapter());
    // 首次加载时调用屏幕适应方法
    this.screenAdapter();
    // 监听到屏幕大小发生改变后，将刷新页面(同F5),以配合addEventListener方法完成适配
    window.onresize = function () {
      window.location.reload();
    };
  },
  //在组件销毁时，进行监听事件的取消
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter());
    clearInterval(this.timerId);
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.fname_ref,'chalk');
      // 为图表添加事件监听
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });

      const initOption = {
        title: {
          text: "百家姓",
          left: 3,
          top: 3,
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, //坐标轴距离调整包含坐标轴上的文字
        },
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#2D3443",

            },
          },
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "white",
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                // 百分之0下的颜色值
                {offset: 0, color: "#5052EE"},
                // 百分之百下的颜色值
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    // 数据
    getData() {
      this.request.get("/stuScreen/fname",{
        params: {
          admissionyear: this.admissionyear,
          academy: this.academy
        }
      }).then(res => {
        if (res.code == 20041) {
          this.allData = res.data
          this.totalPage =
              this.allData.length % 5 === 0
                  ? this.allData.length / 5
                  : this.allData.length / 5 + 1;
        }
      }).finally(()=>{
        this.updateChart();
      })
      // 启动定时器
      this.startInterval();
    },
    // 更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      const showData = this.allData.slice(start, end); //左包含，右不包含
      const nameData = showData.map((item) => {
        return item.name;
      });
      const valueData = showData.map((item) => {
        return item.value;
      });
      const dataOption = {
        xAxis: {
          data: nameData,
        },
        series: [
          {
            data: valueData,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const sizeModel = (this.$refs.fname_ref.offsetWidth / 100) * 7.2;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: sizeModel/2,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: sizeModel,
            },
          },
        },
        series: [
          {
            barWidth: sizeModel,
            itemStyle: {
              barBorderRadius: [sizeModel / 2, sizeModel / 2, 0, 0],
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    startInterval() {
      // 保险起见，在启动定时器之前检查是否已有timerId
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    },
  },
};
</script>
// 设置为scoped，仅在本页面生效
<style lang="less" scoped></style>
